import React, { useState, useEffect } from 'react'
import axios from 'axios'

export default function App () {
  const [list, setList] = useState([])
  useEffect(() => {
    // !#1 定义一个异步函数
    async function getData () {
      const {
        data: {
          data: { channels },
        },
      } = await axios.get('http://geek.itheima.net/v1_0/user/channels')
      // 添加到状态
      setList(channels)
    }
    // !#3 一定不要忘了调用
    getData()
  }, [])
  return (
    <div>
      <ul>
        {list.map(item =>
          <li key={item.id}>{item.name}</li>
        )}
      </ul>
    </div>
  )
}